<template>
  <div class="dialog-container">
    <el-table v-loading="loading" :data="stationList"  max-height="500">
      <el-table-column label="序号" align="left" prop="stationOrder" />
      <el-table-column label="站点名称" align="left" prop="stationName" />
      <el-table-column label="上下行" align="left" prop="direction">
        <template #default="scope">
          <dict-tag :options="basic_vehicle_direction" :value="scope.row.direction" />
        </template>
      </el-table-column>
      <el-table-column label="站点类型" align="left" prop="stationType">
        <template #default="scope">
          <dict-tag :options="basic_route_station_type" :value="scope.row.stationType" />
        </template>
      </el-table-column>
      <el-table-column label="经纬度" align="left" prop="longitude">
        <template #default="scope">
          {{ scope.row.longitude+','+scope.row.latitude }}
        </template>
      </el-table-column>
      <el-table-column label="起始站距" align="center" prop="firstStationDistance" />
      <el-table-column label="状态" align="center" prop="status">
        <template #default="scope">
          <dict-tag :options="sys_data_status" :value="scope.row.status" />
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" fixed="right">
        <template #default="scope">
          <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)"
            v-hasPermi="['basic:station:edit']">考核配置</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 添加或修改站点对话框 -->
    <el-dialog :title="title" v-model="open" width="60%" append-to-body>
      <RouteStationAssess :route-id="props.routeId" :station-id="stationId" />
    </el-dialog>
  </div>
</template>

<script setup name="RouteConfig">
import RouteStationExtend from "./routeStationExtend/index"
import RouteStationAssess from "./routeStationAssess/index"
import { listRouteStation } from "@/api/basic/routeStation";
const { proxy } = getCurrentInstance();
const { sys_data_status, basic_vehicle_direction, basic_route_station_type } = proxy.useDict('sys_data_status', 'basic_vehicle_direction', 'basic_route_station_type');
const props = defineProps({
  // 当前的值
  routeId: [Number, String]
});
const stationList = ref([]);
const open = ref(false);
const loading = ref(true);
const title = ref("");
const stationId = ref(0)
const data = reactive({
  queryParams: {
    routeId: null,
  }
});

const { queryParams } = toRefs(data);

/** 查询站点列表 */
function getList() {
  loading.value = true;
  listRouteStation(queryParams.value).then(response => {
    stationList.value = response.data;
    loading.value = false;
  });
}

/** 修改按钮操作 */
function handleUpdate(row) {
  console.log(row)
  stationId.value = row.stationId
  open.value = true;
  title.value = row.stationName+" 考核配置";
}

watch(props, (newVal, oldVal) => {
  queryParams.value.routeId = newVal.routeId
  getList()
}, { immediate: true });

</script>
<style scoped></style>
